<template>
<div>
<Home-Header></Home-Header>
<home-swiper :swiperList="swiperList"></home-swiper>
<home-icons :iconList="iconList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
<home-weekend :weekendList="weekendList"></home-weekend>
</div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'Home',
	data () {
		return {
			lastCity: '',
			iconList: [],
			recommendList: [],
			weekendList: [],
			swiperList: []
		}
	},
	components: {
		HomeHeader,
		HomeSwiper,
		HomeIcons,
		HomeRecommend,
		HomeWeekend
	},
	mounted () {
		this.lastCity = this.city
		this.getIndexJson()
	},
	methods: {
		getIndexJson () {
			axios.get('/api/index.json').then(this.getIndexJsonSucc)
		},
		getIndexJsonSucc (res) {
			let result = res.data
			if (result.ret) {
				let data = result.data
				this.iconList = data.iconList
			    this.recommendList = data.recommendList
				this.weekendList = data.weekendList
				this.swiperList = data.swiperList
			}
		}
	},
	activated () {
		console.log(this.lastCity)
		console.log(this.city)
		if (this.lastCity !== this.city) {
		  this.lastCity = this.city
		  this.getIndexJson()
		}
	},
	computed: {
		...mapState(['city'])
	}
}
</script>

<style>
</style>
